<template>
     <div id="waterFallCollect" style="width: 100%; height: 100%"></div>
</template>
  
  <script>
  import {
    Themes,
    lightningChart,
    AxisTickStrategies,
    PalettedFill,
    emptyFill,
    LUT,
    ColorRGBA
  } from '@arction/lcjs'
  
  export default {
    name: 'waterFallPage',
    data () {
      return {
        startX: 0,
        range: 200
      }
    },
    mounted () {
      // this.initWebSocket();
      this.initChart()
    },
    methods: {
        getXWaterfall (a, b) {
            let range
            switch (b) {
            case 0 : range = 100; break
            case 1 : range = 50; break
            case 2 : range = 12.5; break
            }
            this.startX = a - range
            this.range = range
            // console.log(this.startX,this.range,'pubu')
            this.initChart()
        },
        initChart () {
            // 设置图表
            this.waterFallChart = this.setupChart(
                {
                    columnIndex: 0,
                    columnSpan: 1,
                    rowIndex: 1,
                    rowSpan: 1,
                    container: 'waterFallCollect',
                    theme: Themes.darkTurquoise
                },
                '瀑布图',
                '频率/MHz',
                '时间/S',
                [0, 30]
            )

            // 单独设置图表样式
            this.waterFallChart
                .getDefaultAxisY()
                .setTickStrategy(AxisTickStrategies.Empty) // 禁用自动刻度
                .setTitleFillStyle(emptyFill) // 禁用自动标题

            this.waterFallSeries = this.setupIntensitySeries(
                this.waterFallChart,
                8000,
                50,
                this.startX,
                this.range,
                '瀑布图数据'
            )

            // 设置提示框
            this.waterFallSeries
                .setMouseInteractions(false)
                .setCursorInterpolationEnabled(false)
                .setCursorResultTableFormatter((tableBuilder, series, x, y) =>
                tableBuilder
                    .addRow(series.getName())
                    .addRow('频率', series.axisX.formatValue(x), 'MHz')
                    .addRow('强度', series.axisY.formatValue(y), 'dBm')
                )

            this.waterFallAxis = this.waterFallChart.addAxisY()
            this.waterFallAxis
                .setMouseInteractions(false)
                .setTitle('Time (s)')
                .setTitleFont((f) => f.setSize(13))
                .setTitleMargin(-5)
                .setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) =>
                tickStrategy.setMajorTickStyle((tickStyle) =>
                    tickStyle
                    .setTickPadding(0)
                    .setLabelPadding(-5)
                    .setLabelFont((f) => f.setSize(12))
                )
                )
            },

            // onReceiveKdSpec(specInfo) {
            //   let dataList = specInfo.ps_data;
            //   let xyData = [];
            //   let yData = [];
            //   let maxXyData = [];
            //   for (let i = 0; i < dataList.length; i++) {
            //     xyData.push({ x: i, y: dataList[i] + Math.random() * 20 });
            //   }
            //   xyData.forEach((item) => {
            //     yData.push(item.y);
            //   });
            //   if (this.isKdPause == true) {
            //     return;
            //   }
            //   this.addData(xyData, yData, maxXyData);
            // },
            // //填数据
            // addData(xyData, yData, maxXyData) {
            //   this.waterFallSeries.addRow(1, 'value', [yData]);
            // },

            // 设置系列
        setupIntensitySeries (chart, columnCount, columnLength, xStart, xRange, name) {
            const palette = new LUT({
                steps: [
                { value: -150, color: ColorRGBA(0, 0, 255) },
                { value: -150 * 0.6, color: ColorRGBA(0, 255, 255) },
                { value: -85, color: ColorRGBA(255, 255, 0) },
                { value: -150 * 0.3, color: ColorRGBA(0, 255, 255) },
                { value: 30, color: ColorRGBA(0, 0, 255) }
                ],
                interpolate: true
            })
            const series = chart
                .addHeatmapSeries({
                columns: columnCount,
                rows: columnLength,
                start: { x: xStart, y: 0 },
                end: { x: xStart + xRange * 2, y: 1024 },
                pixelate: true, //像素化
                })
                .setFillStyle(new PalettedFill({ lut: palette }))
                .setName(name)
                .setCursorEnabled(false) // 移除光标
                .setMouseInteractions(false)
            // 图例框
            // const legend = chart
            //   .addLegendBox()
            //   .setAutoDispose({
            //     type: 'max-width',
            //     maxWidth: 0.3,
            //   })
            //   .add(chart);
            return series
        },

        // 设置图表
        setupChart (options, title, xAxisTitle, yAxisTitle) {
            const chart = lightningChart()
                .ChartXY({
                ...options
                })
                .setTitle(title)
                .setPadding({ top: 2, left: 1, right: 6, bottom: 2 })
                .setMouseInteractions(false)
                .setTitleMarginTop(1)

            chart
                .getDefaultAxisX()
                .setTitle(xAxisTitle)
                .setTitleFont((f) => f.setSize(13))
                .setMouseInteractions(false)
                .setTitleMargin(-5)

            chart
                .getDefaultAxisY()
                .setTitle(yAxisTitle)
                .setTitleFont((f) => f.setSize(13))
                .setMouseInteractions(false)
                .setTitleMargin(0)
                .setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) =>
                    tickStrategy.setMajorTickStyle((tickStyle) =>
                        tickStyle.setLabelFont((f) => f.setSize(12))
                    )
                )
            return chart
        },
    }
  }
  </script>
  
  